<template>
  <view class="login_container">
    <headerNav :navRightIcon="false" :isShowBg="false" leftIconColor="#fff" />
    <view class="login_title tac">输入验证码</view>
    <view class="service tac mt10">验证码已发送至{{mobile}}</view>
    <view class="flex justify-center code_input_container">
      <u-code-input v-model="code" color="#262D2C" border-color="#F6F6F6" maxlength="4" @finish="onFinish" :focus="true" dot></u-code-input>
    </view>
    <view class="wrap">
      <u-toast ref="uToast"></u-toast>
      <u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange" endText="重新获取验证码"></u-code>
      <view class="service tac mt40" @tap="getCode">{{tips}}</view>
    </view>
  </view>
</template>

<script>
import headerNav from '@/components/headerNav/headerNav.vue'
import loginType from '../components/loginType/index.vue'
export default {
  name: 'loginCode',
  components: {
    headerNav,
    loginType
  },
  data() {
    return {
      customStyleOtherLogin: {
        height: '48px',
        color: '#262d2c'
      },
      phone: 15800000000,
      code: '',
      seconds: 120,
      tips: '',
      loading: false
    };
  },
  onReady() {
    this.$refs.uCode.start();
    uni.onKeyboardHeightChange((res) => {

    });
  },
  onLoad(query) {
    // this.$refs.uCode.start();
    // #ifdef APP-PLUS || mp-weixin
    // uni.onKeyboardHeightChange(this.onKeyboardHeightChange);
    // #endif
    this.mobile = query.mobile
  },
  onHide() {
    // #ifdef APP-PLUS || mp-weixin
    // uni.offKeyboardHeightChange(this.onKeyboardHeightChange);
    // #endif
  },
  onShow() {
    // this.getCodeAgain()
    this.$refs.uCode && this.$refs.uCode.start();
    // this.getCode()
    this.$u.toast('验证码已发送，请注意查收')
  },
  methods: {
    onKeyboardHeightChange(res) {
      console.log('onKeyboardHeightChange', res)
      if (res.height) {
        let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
        let curRoute = routes[routes.length - 1].route // 获取当前页面路由，也就是最后一个打开的页面路由
        if (curRoute.includes('personal/loginCode/index')) {
          console.log('%c [ res.height ]-113', 'font-size:13px; background:pink; color:#bf2c9f;', res.height)
          let keyboardHeight = res.height; // 获取并保存键盘高度
          uni.setStorageSync('keyboardHeight', keyboardHeight); // 存储键盘高度
        }
      }
    },
    codeChange(text) {
      text = text.replace('秒', '秒后');
      this.tips = text
      // this.tips = [...new Set(this.tips)].join('')
    },
    async getCode() {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        await this.getCodeAgain()
        setTimeout(() => {
          uni.hideLoading();
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast('倒计时结束后再发送');
      }
    },
    end() {
      // uni.$u.toast('倒计时结束');
    },
    start() {
      // uni.$u.toast('倒计时开始');
    },
    // onFinish() {
    //   this.phoneLogin()
    // },
    async onFinish() {
      if (this.loading || (this.code && this.code.length!== 4)) return
      this.loading = true
      let cid = uni.getStorageSync('clientid')
      console.log('%c [ cid ]-81', 'font-size:13px; background:pink; color:#bf2c9f;', cid)
      if (!cid) {
        this.$u.toast('用户推送id不存在，推送消息可能会失败，但不影响其他功能正常使用')
      }
      try {
        let params = {
          mobile: this.mobile,
          captcha: this.code,
          cid: cid
        }
        // return
        let {
          code,
          data,
          msg
        } = await this.post('/api/client/mobile_code_login', params, true)
        console.log('%c [ 登录后的token ]-94', 'font-size:13px; background:pink; color:#bf2c9f;', data)
        console.log('%c [ code ]-98', 'font-size:13px; background:pink; color:#bf2c9f;', code)
        if (code == 1) {
          this.$u.toast('登录成功')
          try {
            this.$store.commit('changeToken',data.token)
            uni.setStorageSync('token', data.token)
          } catch (error) {
            console.log('%c [ error ]-111', 'font-size:13px; background:pink; color:#bf2c9f;', error)
          }
          let token = uni.getStorageSync('token')
          console.log('%c [ 获取登录后存入缓存的token ]-109', 'font-size:13px; background:pink; color:#bf2c9f;', token)
          uni.setStorageSync('userinfo', data)
          uni.setStorageSync('mobile', data.mobile)
          uni.setStorageSync('mobile2', data.mobile)
          let {code:code1,data:data1,msg:msg1} = await this.post('api/client/info', '', false)
          if (+code1 === 1) {
            uni.setStorageSync('is_push_follow',data1.is_push_follow)
            uni.setStorageSync('is_push_msg',data1.is_push_msg)
            uni.setStorageSync('is_push_news',data1.is_push_news)
            uni.setStorageSync('userinfo',data1)
          }
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index'
            });
          }, 0);
          this.loading = false
        } else {
          this.$u.toast(msg)
          this.code = ''
          this.loading = false
        }
      } catch (error) {
        console.log('%c [ error ]-137', 'font-size:13px; background:pink; color:#bf2c9f;', error)
        this.code = ''
        this.loading = false
      }
    },
    // 获取用户信息
    user() {
      this.post('api/client/info', '', false).then(res => {
        if (res.code == 1) {
          uni.setStorageSync('is_push_follow',res.data.is_push_follow)
          uni.setStorageSync('is_push_msg',res.data.is_push_msg)
          uni.setStorageSync('is_push_news',res.data.is_push_news)
          uni.setStorageSync('userinfo',
          	res.data)
        } else if(res.code==401){
          uni.removeStorageSync('token')
          uni.removeStorageSync('userinfo')
          uni.removeStorageSync('mobile')
          this.userinfo = ''
        }
      })
    },
    async getCodeAgain() {
      let params = {
        mobile: this.mobile,
        event: 'mobilelogin'
      }
      let {
        code,
        data,
        msg
      } = await this.post('api/sms/send', params, false)
      if (+code === 1) {
        this.$u.toast('验证码已发送，请注意查收')
      } else {
        this.$u.toast(msg)
      }
    }

  },
};
</script>
<style lang="scss" scoped>
.login_container {
  .login_title {
    color: $uni-text-color;
    font-size: 48rpx;
    padding: 62rpx 0 0 0;
  }

  .phone_input {
    padding: 30rpx 32rpx;
    background-color: #f6f6f6;
    border-radius: 120rpx;
  }

  .service {
    color: #9b9c9e;
    font-size: 22rpx;
    margin-bottom: 124rpx;
  }

  .code_input_container /deep/ .u-code-input__item {
    width: 120rpx !important;
    height: 120rpx !important;
    background-color: #f6f6f6;
  }
}
</style>